<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vue1</title>
        <script src="js/vue.js"></script>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            #app{
                width: 800px;
                margin: 50px auto;
                background: skyblue;
            }
            table{
                width: 100%;
                background: #000;
            }
            table tr {
                background: #fff;
                position: relative;
            }
            table tr td{
                text-align: center;
            }
            form{
                width: 800px;
                display: flex;
                justify-content: space-between;
            }
            .v-enter-active, .v-leave-active{
                transition:  opacity .5s;
            }
            .v-enter, .v-leave-to {
                opacity: 0;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <transition>
                <form v-show="isShow">
                    <input type="text" placeholder="请输入序号" v-model="person.id">
                    <input type="text" placeholder="请输入姓名" v-model="person.name">
                    <input type="text" placeholder="请输入分数" v-model="person.score">
                    <input type="submit" value="新增" @click.prevent="add">
                    <input type="submit" value="查询" @click.prevent="query">
                </form>
            </transition>
           <table>
               <tr>
                   <th>序号</th>
                   <th>姓名</th>
                   <th>分数</th>
                   <th>时间</th>
                   <th>操作</th>
               </tr>
               <tr v-for="(person, index) in persons">
                <!-- <td><input type="text" :value="person.id" :disabled = "isDisabled"></td>
                <td><input type="text" :value="person.name" :disabled = "isDisabled"></td>
                <td><input type="text" :value="person.score" :disabled = "isDisabled"></td>
                <td><input type="text" :value="person.time | dateFormart()" :disabled = "isDisabled"></td> -->
                <td><input type="text" v-model="person.id" :disabled = "isDisabled"></td>
                <td><input type="text" v-model="person.name" :disabled = "isDisabled"></td>
                <td><input type="text" v-model="person.score" :disabled = "isDisabled"></td>
                <td><input type="text" :value="person.time | dateFormart()" :disabled = "isDisabled"></td>
                <td>
                    <a href="#" @click.prevent="edit">编辑</a>
                    <a href="#" @click.prevent="del(index)">删除</a>
                    <br/>
                    <a href="#" @click.prevent="more">更多操作</a>
                </td>
            </tr>
           </table>
           
        </div>
        <script>
            Vue.filter("dateFormart",  function (value, fmStr) {
                let date = new Date(value)
                let year = date.getFullYear()
                let month = date.getMonth() + 1 + ""
                let day = date.getDay() +""
                let hour = date.getHours() + ""
                let minute = date.getMinutes() + ""
                let second = date.getSeconds() + ""
                if(fmStr && fmStr === 'yyyy-MM-dd'){
                    return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`
                }
                return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")} ${hour.padStart(2, "0")}:${minute.padStart(2, "0")}:${second.padStart(2, "0")}`
            });
            let vue = new Vue({
        // 告诉vue的实例对象，将来需要控制界面上的那个区域
                el:'#app',
                data:{
                    isDisabled:true,
                    isShow:false,
                    persons:[
                        {
                            id:1,
                            name:"haha",
                            score:90,
                            time:Date.now()
                        },
                        {
                            id:2,
                            name:"haha2",
                            score:"90",
                            time:Date.now()
                        },
                        {
                            id:3,
                            name:"haha3",
                            score:"90",
                            time:Date.now()
                        },
                        {
                            id:4,
                            name:"haha4",
                            score:"91",
                            time:Date.now()
                        },

                    ],
                    person:{
                        id:"",
                        name:"",
                        score:"",
                        
                    },
                        
                },
                methods: {
                    edit(){
                        this.isDisabled = !this.isDisabled;
                    },
                    more(){
                        this.isShow = !this.isShow
                    },
                    del(index){
                        this.persons.splice(index, 1);
                    },
                    add(){
                        this.person.time = Date.now()
                        this.persons.push(this.person)
                        this.person = {
                            id:"",
                            name:"",
                            score:"",
                        }
                    },
                    query(){
                        console.log(this.person)
                        let newPersons = this.persons.filter((person)=>{
                           
                            if(person.score === this.person.score){
                                return true;
                            }
                        });
                        this.persons = newPersons
                    }
                },
            });
        </script>
    </body>
</html>